/**
 * Created with hong.rong
 * Date:2020/07/27
 */

import React, { useState, Fragment } from 'react'
import { isFunction } from 'lodash'
import { Modal, Form, Input, message } from 'antd'
import Upload from './Upload'
import DCTextArea from '@/pages/components/DCTextArea'
import { bannerModify } from '@/services/config/banner'

const TYPE = {
  CREATE: {
    LABEL: '新增配置',
    VALUE: 'CREATE',
  },
  EDIT: {
    LABEL: '编辑配置',
    VALUE: 'EDIT',
  },
  VIEW: {
    LABEL: '查看配置',
    VALUE: 'VIEW',
  },
}

const labelWidth = 80

export default function Modify({ children, refreshList }) {
  const [visible, setVisible] = useState(false)
  const [confirmLoading, setConfirmLoading] = useState(false)
  const [modalType, setModalType] = useState(null)
  const [form] = Form.useForm()

  /**
   * 提交
   */
  const handleOk = () => {
    form.validateFields().then(async ({ img, ...restValues }) => {
      const params = {
        ...restValues,
        img: (img[0] || {}).url,
      }
      setConfirmLoading(true)
      const { data = {} } = await bannerModify(params)
      if (data && data.code === 0) {
        message.success('保存成功')
        handleCancel()
        isFunction(refreshList) && refreshList()
      } else {
        handleCancel()
      }
    })
  }
  /**
   * 显示弹框
   * @type {*|Function}
   */
  const handleShow = (modalType, current) => {
    if (modalType === TYPE.EDIT.VALUE || modalType === TYPE.VIEW.VALUE) {
      form.setFieldsValue(current)
    }
    setModalType(modalType)
    setVisible(true)
  }
  /**
   * 取消弹框
   * @type {*|Function}
   */
  const handleCancel = () => {
    setVisible(false)
    setConfirmLoading(false)
    setModalType(null)
    form.resetFields()
  }

  const other = {}
  let disabled = false
  if (modalType === TYPE.VIEW.VALUE) {
    other.footer = null
    disabled = true
  }
  return (
    <Fragment>
      {isFunction(children) && children(handleShow)}
      <Modal
        {...other}
        destroyOnClose
        title={(TYPE[modalType] || {}).LABEL}
        visible={visible}
        confirmLoading={confirmLoading}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <Form labelAlign="left" form={form}>
          <Form.Item
            label="名称"
            name="title"
            rules={[{ required: true }]}
            qql-form-label-width={labelWidth}
          >
            <Input placeholder="请输入" disabled={disabled} />
          </Form.Item>
          <Form.Item noStyle name="bannerId">
            <Input type="hidden" disabled={disabled} />
          </Form.Item>
          <Form.Item
            label="banner图"
            name="img"
            rules={[{ required: true }]}
            qql-form-label-width={labelWidth}
          >
            <Upload
              disabled={disabled}
              onChange={v => {
                if (v[0] && !form.getFieldValue('title')) {
                  form.setFieldsValue({
                    title: v[0].name,
                  })
                }
              }}
            />
          </Form.Item>
          <Form.Item
            label="备注"
            name="address"
            rules={[{ required: true }]}
            qql-form-label-width={labelWidth}
          >
            <DCTextArea
              placeholder="请输入"
              maxLength={1000}
              disabled={disabled}
            />
          </Form.Item>
        </Form>
      </Modal>
    </Fragment>
  )
}
Modify.TYPE = TYPE
